<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
			body{
				perspective: 1000px;
			}
			.lifang{
				width: 200px;
				height: 200px;
				margin: 200px auto;
				position: relative;
				/* 保留子元素的3d效果 */
				transform-style: preserve-3d;
				transform: rotate3d(1,1,1,0deg);
				transition: all 5s;
			}
			.lifang:hover{
				transform: rotate3d(1,1,1,720deg);
				
			}
			.page{
				width: 200px;
				height: 200px;
				position: absolute;
				left: 0;
				top: 0;
				opacity: 0.6;
			}
			
			.front{
				background-image: url(https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1593106255,4245861836&fm=26&gp=0.jpg) ;
				background-size: 100% 100%;
				transform: translateZ(100px);
			}
			.back{
				background-image: url(https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg) ;
				background-size: 100% 100%;
				transform: translateZ(-100px);
			}
			
			.right{
				background-image: url(https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1830914723,3154965800&fm=26&gp=0.jpg);
				background-size: 100% 100%;
				transform: rotateY(90deg) translateZ(100px);
			}
			.left{
				background-image: url(https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg);
				background-size: auto 100%;
				transform: rotateY(-90deg) translateZ(100px);
			}
			
				
			.top{
				background-image: url(https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3461177213,1528805342&fm=26&gp=0.jpg);
				background-size: auto 100%;
				transform: rotateX(90deg) translateZ(100px);
			}
			.bottom{
				background-image: url(https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3922290090,3177876335&fm=26&gp=0.jpg);
				background-size: auto 100%;
				transform: rotateX(-90deg) translateZ(100px);
			}
		</style>
	</head>
	<body>
			
		<div class="lifang">
			<div class="page front"></div>
			<div class="page back"></div>
			<div class="page left"></div>
			<div class="page right"></div>
			<div class="page top"></div>
			<div class="page bottom"></div>
		</div>
		
	</body>
</html>
